<template>
  <div class="wraper-center">
    <div class="crumbs">
      <a href="/">首页</a>
      <span>&gt;</span>
      <template v-if="listQuery.params.typeId === ''">
        <a :href="`/list?typePid=${list[0].type_pid}`">
          {{ list[0].type_pname }}
        </a>
      </template>
      <template v-else>
        <a :href="`/list?typePid=${list[0].type_pid}`">
          {{ list[0].type_pname }}
        </a>
        &gt;
        <a :href="`/list?typeId=${list[0].type_id}`">
          {{ list[0].type_name }}
        </a>
      </template>
    </div>
    <div class="w-con clearfix">
      <div class="w-left">
        <div class="card">
          <h2 class="tit">
            <template v-if="listQuery.params.typeId === ''">
              {{ list[0].type_pname }}
            </template>
            <template v-else>
              {{ list[0].type_name }}
            </template>
          </h2>
        </div>
        <ul class="art-items">
          <li
            v-for="(item, index) in list"
            :key="index"
            class="art-item"
          >
            <h3 class="tit">
              <a
                :href="`/show?id=${item.id}`"
                target="_blank"
              >{{ item.title }}</a>
            </h3>
            <p class="desc">
              <a
                :href="`/show?id=${item.id}`"
                target="_blank"
              >
                {{ item.description }}
              </a>
            </p>
            <p class="info">
              <span
                v-if="listQuery.params.typeId === ''"
                class="type"
              >
                分类：
                <a :href="`/list?typePid=${item.type_pid}&typeId=${item.type_id}`">
                  {{ item.type_name }}
                </a>
              </span>
              <span class="date">
                {{ item.create_time }}
              </span>
            </p>
          </li>
        </ul>
        <div class="pagination-container">
          <el-pagination
            background
            :current-page="listQuery.page.num"
            :page-size="listQuery.page.size"
            layout="prev, pager, next"
            :total="listQuery.page.total"
            :pager-count="5"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div class="w-right">
        <div class="card">
          <h2 class="tit">
            相关分类
          </h2>
          <ul class="xgfl-items clearfix">
            <li
              v-for="(item, index) in sortLst"
              :key="index"
              class="xgfl-item"
            >
              • <a
                :href="`/list?typePid=${item.type_pid}&typeId=${item.type_id}`"
                :title="item.type_name"
              >{{ item.type_name }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList, getSonType } from '@/api/article'

export default {
  name: 'List',
  components: {
  },
  layout: 'default',
  async fetch({ store, params }) {
  },
  async asyncData({ store, params, query, error }) {
    const typePid = query.typePid || ''
    const typeId = query.typeId || ''
    const listQuery = {
      page: {
        num: query.page ? query.page * 1 : 1,
        total: 0,
        size: 8
      },
      params: {
        typeId,
        typePid
      }
    }
    const list = await getList(listQuery).then(response => {
      listQuery.page.total = response.data.page.total
      return response.data.lstItem
    }).catch(err => {
      err
      error({ statusCode: 500, message: '应用程序错误' })
    })
    const sortLst = await getSonType({
      typePid
    }).then(response => {
      return response.data.lstItem
    }).catch(err => {
      err
      error({ statusCode: 500, message: '应用程序错误' })
    })
    return {
      listQuery,
      list,
      sortLst
    }
  },
  data() {
    return {
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    // 改变当前页面
    handleCurrentChange(val) {
      let url = `?typePid=${this.listQuery.params.typePid}&typeId=${this.listQuery.params.typeId}`
      url += `&page=${val}`
      window.location.href = url
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .art-items{
      margin-top: 5px;
      .art-item{
        border-bottom: 1px dashed #ddd;
        padding: 0 20px;
        .tit,
        .desc{
          a{
            display: block;
          }
          a:hover{
            color: #59a714;
          }
        }
        .tit{
          padding: 10px 0 8px;
          font-weight: bold;
          a{
            color: #333;
          }
        }
        .desc{
          margin-bottom:10px;
          text-indent: 2em;
          font-size: 12px;
          line-height: 1.8em;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .info{
          padding: 0 0 10px;
          font-size: 12px;
          .type{
            margin-right: 15px;
          }
          .date{
            color: #999;
          }
        }
      }
    }
</style>
